<template>
	<view style="background: #fff;">
		<view class="pug-share-image" >
			<!-- 把生成的海报赋值到这里 -->
			<image :src="path" mode="widthFix" @click="saveImage"></image>
			<button @click="saveImage">导出海报</button>
		</view>
		
		<!-- 海报 -->
		<l-painter ref="painter" isCanvasToTempFilePath @success="handleSuccess($event)" custom-style="position: fixed;display:none;"
			css="width: 750rpx; padding-bottom: 40rpx;border-radius:8px;border:1px solid #ccc;background: linear-gradient(#fafafa 0%, #fafafa 100%);">
			   
			   <l-painter-view css="background: #fff; padding: 30rpx;">
				   <!-- 基础用法 -->
				    <l-painter-image
				      :src="painterItem.image"
				      css="width: 100%; "
				    />
				    <l-painter-view css="background: #fff; width:440rpx;display:inline-block;">
						<l-painter-text
							text="凡是不能杀死你的，最终都会让你更强"
							css="line-clamp: 2; padding-top: 20rpx; font-size:36rpx;font-weight:600"
						  />
						  
						<l-painter-text
						   text="通过连续、完整有效地训练，构建完整的应用设计开发知识系统，独立开发一个带商业模型的应用实例，成为一名独立开发者，可以自如使用代码表达与实现自己的想法。"
						   css=" padding-top: 20rpx;line-clamp: 4; color:#999;font-size:28rpx;"
						 />
					 </l-painter-view>
					 
					 <l-painter-qrcode
					   text="limeui.qcoon.cn"
					   css="width: 200rpx; height: 200rpx;margin-left:50rpx;margin-top:130rpx;"
					 />
			 </l-painter-view>
			 
			  
			
		</l-painter>
	</view>
</template>

<script>
	
	export default {
		name: "pug-share",
		data() {
			return {
				path:"",
				painterItem:{
					avatar:"https://portrait.gitee.com/uploads/avatars/user/209/628099_fudiwei_1627875359.png!avatar60",
					nickname:"飞哥",
					image:"https://imagepphcloud.thepaper.cn/pph/image/216/282/241.jpg",
					price:"12",
					realprice:"125",
					title:"晓庄之声/旅游景区门户小程序旅游景区门户小程序旅游景区门户小程序",
					categoryname:"Java",
					qrcode:"二维码信息"
				}
			}
		},
		methods: {
			handleSuccess(ev){
				this.path = ev;
			},
			
			saveImage(){
				// 将海报的canvas画布生成图片
				this.$refs.painter.canvasToTempFilePathSync({
				  fileType: "jpg",
				  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
				  pathType: 'url',
				  quality: 1,
				  success: (res) => {
					// uni.saveImageToPhotosAlbum 如果是app就会自动把生成的海报保存到用户手机的相册中
				    uni.saveImageToPhotosAlbum({
				        filePath: res.tempFilePath,
				        success() {
				            uni.showToast({
				            	title:"保存成功"
				            })
				        }
				    });
				  },
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pug-share-image {
		position: fixed;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -70%);
		height: 800rpx;
		width: 80%;
		border-radius: 40rpx;
		background: #fff;
		z-index: 20070;

		image {
			width: 100%;
		}
	}

	.pug-share-box {
		padding: 20rpx;

		.pug-share-items {
			display: flex;
			padding: 0rpx 20rpx 40rpx;
			justify-content: space-between;
			align-items: center;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.iconfont {
					font-size: 36px;
					padding-bottom: 20rpx;
				}

				.txt {
					font-size: 24rpx;
					font-weight: 800;
					color: #666;
				}
			}
		}
	}
</style>
